<template>
  <div class="comment-item">
    <div class="comment-container">
      <div class="comment-header">
        <div class="user-img">
          <img :src="item.avatar" alt="user avatar" />
        </div>
        <div class="comment-author">{{ item.uname }}</div>
        <div class="comment-time">{{ sa.forDate3(item.createTime, 2) }}</div>
      </div>
      <div class="comment-actions">
        <div @click="handleCommentClick">
          <svg-icon icon-class="discuss_1" />
          <span class="comment-count">{{ commentCount }}</span>
        </div>
        <div @click="handleLikeClick">
          <svg-icon icon-class="thumb_up" :class="{ 'thumb-up-box': isLiked }" />
          <span class="like-count">{{ likeCount }}</span>
        </div>
        <div class="del-box" v-if="isCommentOwner" @click="handleDelete">
          <svg-icon icon-class="delete_5" />
        </div>
      </div>
    </div>

    <div class="comment-content">
      <span class="comment-text" v-html="item.note" />
      <svg-icon icon-class="message_2" :class="{ 'thumb-up-box': item.inputShow }" @click="toggleReplyInput" />
    </div>

    <div class="reply-input" v-if="item.inputShow">
      <el-input v-model="replyContent" placeholder="请回复内容" maxlength="100" show-word-limit>
        <el-button slot="append" icon="el-icon-s-promotion" @click="handleReply" />
      </el-input>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommentItem',
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      item: { ...this.data },
      replyContent: '',
      likeFlag: false
    }
  },
  computed: {
    currentUser() {
      return sa.$sys.getCurUser()
    },
    isCommentOwner() {
      return this.currentUser?.id === this.item.commentator
    },
    isLiked() {
      return this.likeIds.includes(this.currentUser?.id)
    },
    likeIds() {
      return this.item.likes ? this.item.likes.split(',') : []
    },
    likeCount() {
      return this.likeIds.length
    },
    commentCount() {
      return this.item.children?.length || 0
    }
  },
  watch: {
    data: {
      handler(newVal) {
        this.item = { ...newVal }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    validateUser() {
      if (!this.currentUser?.id) {
        sa.msg('请先登录！')
        return false
      }
      return true
    },
    handleCommentClick() {
      if (!this.validateUser()) return
      this.toggleReplyInput()
    },

    handleLikeClick() {
      if (!this.validateUser()) return
      this.updateLikes()
    },

    updateLikes() {
      const userId = this.currentUser.id
      let likes = this.likeIds

      if (likes.includes(userId)) {
        likes = likes.filter(id => id !== userId)
      } else {
        likes.push(userId)
      }
      this.item.likes = likes.join(',')

      try {
        sa.ajax('/comments/thumbsUp', { id:item.id }, function (res) {
          if (res.code === 200) {
            sa.msg(res.msg);
          }
        }.bind(this),
          { type: 'get' }
        );
      } catch (error) {
        sa.msg(error.message || '评论删除失败');
      }
    },

    handleReply() {
      sa.checkNull(this.replyContent, '请输入内容！');
      const params = {
        resourceId: this.item.resourceId,
        type: '1',
        note: this.replyContent,
        pid: this.item.id
      }
      sa.ajax('/comments/comment',
        sa.removeNull(params),
        function (res) {
          if (res.code === 200) {
            this.replyContent = ''
            sa.f5()
          }
        }.bind(this),
        { type: 'post' }
      );
    },

    handleDelete() {
      try {
        sa.ajax('/comments/delOwner', { id: this.item.id }, function (res) {
          if (res.code === 200) {
            sa.msg(res.msg);
            sa.f5()
          }
        }.bind(this),
          { type: 'get' }
        );
      } catch (error) {
        sa.msg(error.message || '评论删除失败');
      }
    },

    toggleReplyInput() {
      if (!this.validateUser()) return
      this.item.inputShow = !this.item.inputShow
      if (!this.item.inputShow) {
        this.replyContent = ''
      }
    },
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/mixin.scss';

.comment-item {
  border-radius: 8px;
  transition: all 0.2s ease;
  padding: 4px;

  &:last-child {
    margin-bottom: 0;
  }
}

.comment-container {
  @include flex-between;
}

.comment-header {
  @include flex-start;
  gap: 6px;
}

.user-img {
  img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }
}

.comment-author {
  font-weight: 500;
}

.comment-time {
  color: #999;
  font-size: 12px;
}

.comment-actions {
  @include flex-end;
  gap: 12px;

  &>div {
    @include flex-center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;

    &:hover {
      background: rgba(64, 158, 255, 0.1);
      transform: translateY(-1px);

      .svg-icon {
        color: #409eff;
      }

      .comment-count,
      .like-count {
        color: #409eff;
      }
    }

    &:active {
      transform: scale(0.95);
    }
  }

  .svg-icon {
    transition: all 0.2s ease;
  }

  .comment-count,
  .like-count {
    margin-left: 6px;
    font-size: 12px;
    transition: all 0.2s ease;
  }
}

.comment-content {
  @include flex-between;
  margin-top: 8px;

  .comment-text {
    flex: 1;
    margin: 0;
    font-size: 14px;
    
    letter-spacing: 1px;
    line-height: 1.6;
    text-indent: 2em;
    text-align: start;
    color: #333;
    word-break: break-word;
    white-space: pre-wrap;
  }

  .svg-icon {
    cursor: pointer;
    margin-left: 8px;
    color: #666;
    transition: all 0.2s ease;

    &:hover {
      color: #409eff;
      transform: scale(1.1);
    }
  }
}

.reply-input {
  padding: 12px 0 12px 40px;
  margin-top: 8px;

  .el-input {
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    &::v-deep .el-input__inner {
      border: none;
      padding: 8px 12px;
      font-size: 14px;
    }

    &::v-deep .el-input-group__append {
      background: #409eff;
      border: none;
      color: #fff;
      padding: 0 16px;
      cursor: pointer;
      transition: all 0.2s ease;

      &:hover {
        background: #66b1ff;
      }

      .el-icon-s-promotion {
        font-size: 16px;
      }
    }
  }
}

.thumb-up-box {
  color: #ff6f00;
}

.del-box {
  color: #fe4545;
  border-radius: 4px;
  transition: all 0.2s ease;

  &:hover {
    transform: translateY(-1px);
  }

  &:active {
    transform: scale(0.95);
  }

  .svg-icon {
    font-size: 16px;
    transition: all 0.2s ease;
  }
}
</style>
